/**
 * Created by Ysssssss on 21/1/26.
 */

import React, { PureComponent } from 'react'
import {connect} from "react-redux";
import {withRouter} from "react-router-dom";
import PageBackHeader from "@common/PageBackHeader";
import {getUserInfo, getBrandList, employeeBrandLogin} from "@sagas/user";
import {setBilinInfo} from "@utils/localStorage";
import EmployeeBrandLoginModal from "@components/login/modal/EmployeeBrandLoginModal";
import notify from "@utils/tip";
import { getAppName } from "@utils/vars";
import { setCookie } from "@utils/cookie";
import BilinIcon from "@common/presentational/BilinIcon";

function mapStateToProps (state) {
    const { user } = state
    return {
        userInfo: user.userInfo,
        brandList: user.brandList,
    }
}

@connect (
    mapStateToProps,
    {
        getUserInfo,
        getBrandList,
        employeeBrandLogin,
    }
)
@withRouter
class BrandMgtPage extends PureComponent {
    constructor(props) {
        super(props);

        this.brandSelect = this.brandSelect.bind(this)
        this.userSetting = this.userSetting.bind(this)
        this.editBrand = this.editBrand.bind(this)
        this.createBrand = this.createBrand.bind(this)
        this.employeeBrandLoginModalRef = React.createRef()
    }

    componentDidMount () {
        const { userInfo } = this.props
        userInfo.account_id || this.props.getUserInfo()
        this.props.getBrandList()
    }

    brandSelect (brandId) {
        const { history } = this.props
        this.props.employeeBrandLogin({
            brandId
        }, res => {
            const { brand_operator = {}, store_operators = [] } = res
            let count = store_operators ? store_operators.length : 0
            if (brand_operator.is_super_admin || brand_operator.is_admin || brand_operator.role_id) {
                if (count === 0) {
                    setCookie('bilin-brand', res.token)
                    setBilinInfo({
                        brandId,
                        storeId: 0
                    })
                    history.push('/main')
                    return ;
                } else {
                    count ++;
                }
            }
            if (count === 1) {
                setCookie('bilin-brand', res.token)
                setBilinInfo({
                    brandId,
                    storeId: store_operators[0].store_id
                })
                history.push('/main')
            } else if (count > 1) {
                this.employeeBrandLoginModalRef.current?.show({
                    data: res
                })
            } else {
                notify('您在该商户内无任何权限，无法进入该商户后台')
            }
        })
    }

    brandLogin ({ id, token, url }) {
        const { history } = this.props
        setCookie('bilin-brand', token)
        setBilinInfo({
            storeId: id
        })
        history.replace(url || '/main')
    }

    editBrand (brandInfo, e) {
        e.preventDefault();
        e.stopPropagation();
        const { history } = this.props
        brandInfo && history.push(`/brand-edit/${brandInfo.brand_id}`)
    }

    createBrand (e) {
        e.preventDefault();
        e.stopPropagation();
        const { history } = this.props
        history.push('/brand-create')
    }

    userSetting (e) {
        e.preventDefault();
        e.stopPropagation();
        const { history } = this.props
        history.push('/user-setting')
    }

    render () {
        const { userInfo, brandList } = this.props
        return userInfo.g_id ? (
            <div className="bilin-web brand-mgt-page">
                <PageBackHeader title={getAppName()} />
                <div className="bilin-web-body">
                    <div className="brand-mgt-user mgt-48">
                        <div className="flex-center">
                            <img className="mgr-16" src={userInfo.avatar} alt=""/>
                            <div>
                                <span className="ft-16 ft-clr-d ft-w600">{ userInfo.user_name }</span>
                                <br />
                                <span className="ft-14 mgt-8 ft-clr-ml">{ userInfo.mobile }</span>
                            </div>
                        </div>
                        <div onClick={this.userSetting} className="user-set-button bd-l ft-clr-md flex-center">账号设置</div>
                    </div>
                    <div className="mgt-36 ft-16 ft-w600">我的品牌</div>
                    <div className="mgt-16 flex-vertical-center">
                        {
                            brandList.map(brandInfo => (
                                <div key={brandInfo.brand_id}
                                     className="brand-item-box bd-l"
                                     data-brand-id={brandInfo.brand_id}
                                     onClick={this.brandSelect.bind(this, brandInfo.brand_id)}
                                >
                                    <div className="pdb-24 bdb-l clearfix">
                                        <img className="fll mgr-12 bd-rds-half" src={brandInfo.logo} alt=""/>
                                        <div className="fll" style={{width: '150px'}}>
                                            <p className="ft-16 ft-w600 text-overflow">{ brandInfo.name }</p>
                                            <p className="ft-12 ft-clr-ml mgt-8 text-overflow">{brandInfo.desc}</p>
                                        </div>
                                        <div className="brand-edit-button flr ft-12"
                                             data-brand-id={brandInfo.brand_id}
                                             onClick={this.editBrand.bind(this, brandInfo)}
                                        >编辑</div>
                                    </div>
                                    <div className="flex-row-between pdt-8">
                                        <p className="ft-12 ft-clr-ml">创建时间：{brandInfo.created_at}</p>
                                        { brandInfo.is_creator ? (
                                            <div className="flr brand-item-sign ft-12 bd-l flex-center ft-clr-ml">创建者</div>
                                        ) : null }
                                    </div>
                                </div>
                            ))
                        }
                        <div className="create-brand-button flex-center ft-16 mgb-24" onClick={this.createBrand}>
                            <BilinIcon type="plus" className="mgr-8"/>
                            <span>新建品牌</span>
                        </div>
                    </div>
                    <EmployeeBrandLoginModal
                        ref={this.employeeBrandLoginModalRef}
                        onClick={this.brandLogin.bind(this )}
                    />
                </div>
            </div>
        ) : null
    }
}

export default BrandMgtPage